<template>
  <div id="app">
    <h3><span class="round"></span>computed</h3>
    <ComputedDemo />

    <h3><span class="round"></span>watch</h3>
    <WatchDemo />

    <h3><span class="round"></span>插槽</h3>
    <SlotDemo>
      <template #default>
        <p>默认插槽</p>
      </template>

      <template #main>
        <p>具名插槽</p>
      </template>

      <template #footer="slotProps">
        <p>{{ slotProps.testProps }}</p>
      </template>
    </SlotDemo>

    <h3><span class="round"></span>过滤器</h3>
    <FilterDemo />

    <h3><span class="round"></span>自定义指令</h3>
    <DirectiveDemo />

    <h3><span class="round"></span>v-model如何自定义组件上使用</h3>
    <ModelDemo v-model="modelValue" />

    <h3><span class="round"></span>keep-alive</h3>
    <KeepAliveDemo />

    <h3>
      <span class="round"></span>
      data中的对象属性添加一个新的属性时会发生什么？如何解决？如何删除属性? </h3>
    <SetDeleteDemo />

    <!-- <h3><span class="round"></span>mixin混入</h3>
    <MiXinDemo /> -->

    <h3><span class="round"></span>extends</h3>
    <ExtendsDemo />

    <h3><span class="round"></span>父子组件生命周期执行顺序</h3>
    <LifeDemo />

    <h3><span class="round"></span>event-bus：非父子组件-兄弟组件通信</h3>
    <EventBusDemo />

    <h3><span class="round"></span>点击自身以外区域关闭弹出层</h3>
    <MaskLayer />

    <h3><span class="round"></span>
      v-bind="$props"、v-bind="$attrs"、v-on="$listeners"用法</h3>
    <PropsDemo />

    <h3><span class="round"></span>
      大文件分片上传</h3>
    <BigFileUpload />

    <!-- <h3><span class="round"></span>
      Vuex状态管理</h3>
    <VuexDemo /> -->

  </div>
</template>

<script>
import ComputedDemo from "./view/computed/index.vue";
import WatchDemo from "./view/watch/index.vue";
import SlotDemo from "./view/slot/index.vue";
import FilterDemo from "./view/filters/index.vue";
import ModelDemo from "./view/model/index.vue";
import KeepAliveDemo from "./view/keep-alive/index.vue";
import SetDeleteDemo from "./view/set-delete/index.vue";
import MiXinDemo from "./view/mixin/index.vue";
import ExtendsDemo from "./view/extends/index.vue";
import LifeDemo from "./view/lifecycle/index.vue";
import EventBusDemo from "./view/event-bus/index.vue";
import MaskLayer from './view/mask-layer'
import PropsDemo from './view/props/index.vue'
import DirectiveDemo from './view/directive/index.vue'
import BigFileUpload from './view/big-file-upload/index.vue'
import VuexDemo from './view/vuex/index.vue'
export default {
  name: "App",
  components: {
    ComputedDemo,
    WatchDemo,
    SlotDemo,
    FilterDemo,
    ModelDemo,
    KeepAliveDemo,
    SetDeleteDemo,
    MiXinDemo,
    ExtendsDemo,
    LifeDemo,
    EventBusDemo,
    MaskLayer,
    PropsDemo,
    DirectiveDemo,
    BigFileUpload,
    VuexDemo
  },
  data() {
    return {
      title: "message",
      modelValue: '我是modelValue'
    };
  },
  beforeCreate() {
    console.log("父beforeCreate");
  },
  created() {
    console.log("父created");
    // 解决页面刷新，vuex数据丢失问题
    if(sessionStorage.getItem('store')) {
      this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
    }

    window.addEventListener('beforeunload', () => {
      sessionStorage.setItem('store', JSON.stringify(this.$store.state));
    })
  },
  beforeMount() {
    console.log("父beforeMount");
  },
  mounted() {
    console.log("父mounted");
  },
  beforeUpdate() {
    console.log("父beforeUpdate");
  },
  updated() {
    console.log("父updated");
  },
  beforeDestroy() {
    console.log("父beforeDestroy");
  },
  destroyed() {
    console.log("父destroyed");
  }
};
</script>

<style>
#app{
  margin: 10px;
}
.round {
  width: 16px;
  height: 16px;
  background: violet;
  display: inline-block;
  border-radius: 50%;
  position: relative;
  right: 5px;
  top: 2px;
}
</style>
